<script setup>
import { onMounted, ref } from 'vue';

import { todoItemsList } from '#/api/hm/todoItems';

const props = defineProps({
  customerId: {
    type: String,
    default: '',
  },
});
console.log(props.customerId);

onMounted(() => {
  // 加载查询回访列表
  getVisitList();
});
// 总条数
const total = ref(0);
const timelineList = ref([]);
// 查询回访列表
async function getVisitList() {
  const params = {
    followCustomerId: props.customerId,
    todoType: '0', // 回访
  };
  // 调用接口
  await todoItemsList(params).then((res) => {
    console.log(res);
    total.value = res.total;
    timelineList.value = res.rows;
  });
}
</script>
<template>
  <div>
    <div class="mb-4">
      该用户一共有
      <span class="text-blue-600">{{ total }}</span>
      条被回访记录。
    </div>
    <a-timeline>
      <a-timeline-item
        v-for="(item, index) in timelineList"
        :key="index"
        color="gray"
      >
        {{ item.handoverTime }}
        <div class="mb-2 mt-2">
          <span class="text-tip-400">回访人员:</span>
          <span class="text-sub-400 ml-2">{{ item.todoPersonName }}</span>
          <span class="text-tip-400 ml-10">回访方式:</span>
          <span class="text-sub-400 ml-2">
            <span v-if="item.followType === '1'" class="text-green-600">
              电话回访
            </span>
            <span v-if="item.followType === '2'" class="text-green-600">
              日常到店
            </span>
            <span v-if="item.followType === '3'" class="text-green-600">
              店内参会
            </span>
            <span v-if="item.followType === '4'" class="text-green-600">
              公司集中大会
            </span>
            <span v-if="item.followType === '5'" class="text-green-600">
              家访
            </span>
          </span>
          <span class="text-tip-400 ml-10">回访结果:</span>
          <span class="text-sub-400 ml-2">
            <span v-if="item.status === '1'" class="text-green-600">
              已回访
            </span>
            <span v-if="item.status === '0'" class="text-red-600">
              未回访
            </span>
          </span>
        </div>
        <div class="mb-2">
          <span class="text-tip-400">回访内容:</span>
          <span class="text-sub-400 ml-2">{{ item.todoDesc }}</span>
        </div>
        <div class="mb-2">
          <span class="text-tip-400">客户反馈:</span>
          <span class="text-sub-400 ml-2">
            <a-textarea
              style="width: 70%"
              :placeholder="item.remark"
              :auto-size="{ minRows: 2, maxRows: 5 }"
              disabled
          /></span>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>
<style scoped>
.text-blue-600 {
  font-weight: 600;
  color: #3b82f6;
}

.text-tip-400 {
  font-weight: 400;
  color: #9ca3af;
}

.text-sub-400 {
  font-weight: 400;
  color: #666;
}
</style>
